<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>彩色风车-css3动画</title>
		<style type="text/css">
			.box {
				width: 400px;
				height: 400px;
				margin: 100px auto;
				animation: xuanzhuan 5s infinite linear;
			}
			
			.box div {
				border: 100px solid yellow;
				float: left;
			}
			
			.box .left_t {
				border-color: transparent red red transparent;
				border-top: none;
				margin-top: 100px;
			}
			
			.box .left_b {
				border-color: yellow yellow transparent transparent;
				border-left: none;
				margin-left: 100px;
			}
			
			.box .right_t {
				border-color: transparent transparent blue blue;
				border-right: none;
			}
			
			.box .right_b {
				border-color: green transparent transparent green;
				border-bottom: none;
			}
			
			@keyframes xuanzhuan {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="left_t"></div>
			<div class="right_t"></div>
			<div class="left_b"></div>
			<div class="right_b"></div>
		</div>
	</body>

</html>